
<template>
  <div class="play-container">
    <div class="tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab"
        :class="{ active: currentTab === tab }"
        @click="selectTab(tab)"
      >
        {{ tab }}
      </div>
    </div>
    <div class="content">
      <div v-if="currentTab === '景点攻略'">
        <div v-for="spot in scenicSpots" :key="spot.name" class="spot" @click="toDetails(spot)">
          <img :src="spot.image"/>
          <div class="spot-info">
            <h3>{{ spot.name }}</h3>
            <p>{{ spot.description }}</p>
            <p>门票：{{ spot.ticket }}</p>
          </div>
          <div v-if="spot.showInfo" class="spot-coordinates">
            经度：{{ spot.longitude }}, 纬度：{{ spot.latitude }}
          </div>
        </div>
      </div>
    <div v-if="currentTab === '住宿攻略'">
          <div v-for="hotel in hotels" :key="hotel.name" class="hotel">
            <img :src="hotel.image" @click="showFoodInfo(hotel)" />
            <h3>{{ hotel.name }}</h3>
            <p>{{ hotel.description }}</p>
          </div>
        </div>
        <div v-if="currentTab === '美食攻略'">
          <div v-for="food in foods" :key="food.name" class="food">
            <img :src="food.image" @click="showFoodInfo(food)" />
            <p>{{ food.description }}</p>
          </div>
        </div>
        <div v-if="currentTab === '历史攻略'">
          <h2>西安历史介绍</h2>
          <p>西安，古称长安、镐京，是陕西省省会、副省级市、特大城市、关中平原城市群核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的科研、教育、工业基地。西安是中国四大古都之一，联合国教科文组织于1981年确定的“世界历史名城”，美媒评选的世界十大古都之一。西安地处关中平原中部、北濒渭河、南依秦岭，八水润长安，是中华文明和中华民族重要发祥地之一，丝绸之路的起点城市、“一带一路”核心区。</p>
        </div>
      </div>
    </div>
    
</template>

<script setup>
import { ref } from 'vue';

import { CONFIG } from "@/utils/config.js";


const currentTab = ref('景点攻略');

const tabs = ref(['景点攻略', '住宿攻略', '美食攻略', '历史攻略']);
const scenicSpots = ref([
  {
    name: '西安钟楼',
    image: 'icon/a.jpeg',
    description: '西安钟楼是中国古代遗留下来的众多钟楼中形制最大、保存最完整的一座。',
    ticket: '50元',
    latitude: 34.261,
    longitude: 108.95,
    showInfo: false,
    id: '1'
  },
  {
    name: '大雁塔',
    image: 'icon/c.jpeg',
    description: '大雁塔位于唐长安城晋昌坊的大慈恩寺内，又名“慈恩寺塔”。',
    ticket: '50元',
    latitude: 34.2225,
    longitude: 108.9439,
    showInfo: false,
    id: '2'
  },
  {
      name: '秦始皇陵兵马俑',
      image: 'icon/c.jpeg',
      description: '秦始皇陵是中国历史上第一个皇帝秦始皇帝的陵墓，其规模之大、埋藏之丰富，是其他帝王陵墓无法比拟的。',
      ticket: '150元',
      latitude: 34.3715,
      longitude: 109.2655,
      showInfo: false,
	  id:3
    }
]);
const hotels=ref([
	{
	    name: '西安威斯汀大酒店',
	    description: '位于市中心，交通便利，设施齐全。',
	    image: 'icon/11.jpeg'
	  },
	  {
	    name: '西安喜来登大酒店',
	    description: '提供豪华客房和套房，享有城市美景。',
	    image: 'icon/12.jpeg'
	  }
	
]);
const foods =ref([
	{
	    name: '肉夹馍',
	    image: 'icon/01.jpeg',
	    description: '肉夹馍是陕西省传统特色食物之一，由腊汁肉和白吉馍组成。',
	    showInfo: false
	  },
	  {
	    name: '凉皮',
	    image: 'icon/02.jpeg',
	    description: '凉皮是陕西，河南，甘肃非常受欢迎的传统小吃。',
	    showInfo: false
	  },
	  {
	    name: '裤带面',
	    image: 'icon/03.jpeg',
	    description: '裤带面是陕西省关中地区特有的传统风味面食。',
	    showInfo: false
	  }
	
])

// const toDetails = (spot) => {
//   router.push({
//     name: 'xianitemDetails',
//     params: { id: spot.id },
//     query: { latitude: CONFIG.latitude, longitude: CONFIG.longitude }
//   });
// };
	function toDetails(item){
			uni.navigateTo({
				url:"/pages/xianitemDetails/xianitemDetails?item="+encodeURI(JSON.stringify(item))
			})
		}
const selectTab = (tab) => {
  currentTab.value = tab;
};
</script>



<style>
.content{
	background-color: lemonchiffon;
}
.play-container {
  display: flex;
  flex-direction: column;
}
.tabs {
	border-radius: 20px;
	background-color: lemonchiffon;
  display: flex;
  border-bottom: 4px solid gold;
}
.tabs div {
  padding: 10px 20px;
  cursor: pointer;
}
.tabs div.active {
  border-bottom: 2px solid red;
}
.content {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.spot, .hotel, .food {
  margin: 10px;
  text-align: center;
  animation: fadeIn 0.5s;
}
img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 40px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.spot-info, .hotel, .food {
  margin-top: 10px;
  border: 2px solid gold;
  border-radius: 50px;
   
  
}
.spot-coordinates {
	
  margin-top: 10px;
  padding: 5px;
  background-color: gold;
  border: 5px solid red;
  border-radius: 30px;
}
.spot:hover, .hotel:hover, .food:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}
.spot:active, .hotel:active, .food:active {
  transform: scale(0.95);
  transition: transform 0.2s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>
